<template>
  <div>
    <component :is="settingComponent" :material="selectedItem" @change="handleChange"></component>
  </div>
</template>

<script setup lang="ts">
import {computed} from "vue";
import {useSmoothDnd03a} from "@/stores/smoothDnd03a";

import TextSettingComponent from "@/material/right03a/TextSettingComponent.vue";
import TextSetting03cComponent from "@/material/right03a/TextSetting03cComponent.vue";
import ImageSettingComponent from "@/material/right03a/ImageSettingComponent.vue";
import ChartSettingComponent from "@/material/right03a/ChartSettingComponent.vue";
import FallbackSettingComponent from "@/material/right03a/FallbackSettingComponent.vue";
import {storeToRefs} from "pinia";

const smoothDndStore = useSmoothDnd03a();
const {selectedItem} = storeToRefs(smoothDndStore)
const settingComponent = computed(()=>{
  if(selectedItem.value){
    switch (selectedItem.value.type){
      case 'text': return TextSettingComponent;
      case 'text03c': return TextSetting03cComponent;
      case 'image': return ImageSettingComponent;
      case 'chart': return ChartSettingComponent;
      default: return FallbackSettingComponent;
    }
  }
})
const handleChange = (data)=>{
  smoothDndStore.updateItemById(data);
}
</script>

<style scoped>

</style>
